

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>产品图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn layui-btn-sm" id="test1">上传图片
            </button>
            <input hidden name="image" id="image_src" value="{$data.image|default=''}">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="test-upload-normal-img" style="width: 120px" src="{$data.image|default=''}">
                <p id="test-upload-demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>产品名称</label>
        <div class="layui-input-block">
            <input type="text" name="name"  placeholder="请输入产品名称" autocomplete="off"  lay-verify="required" class="layui-input"  value="{$data.name|default=''}">
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label"><span class="required">*</span>产品详情</label>-->
<!--        <div class="layui-input-block">-->
<!--            <button type="button" class="layui-btn layui-btn layui-btn-sm" id="test2">上传图片-->
<!--            </button>-->
<!--            <input hidden name="detail" id="detail_src" value="{$data.image|default=''}">-->
<!--            <div class="layui-upload-list">-->
<!--                <img class="layui-upload-img" id="test-upload-normal-img1" style="width: 120px" src="{$data.detail|default=''}">-->
<!--                <p id="test-upload-demoText1"></p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="layui-col-sm12">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>产品详情</label>
            <div class="layui-input-block">
                <!--                <textarea id="content" style="display: none;" name="content">{$data['content']|default=''}</textarea>-->
                <div id="content">

                </div>

            </div>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" name="id" value="{$data.id|default=''}">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>
<script type="text/javascript" src="/js/wangEditor.js"></script>
<script>
    layui.use(['form','upload','layer'], function(){
        var $ = layui.$
            ,form = layui.form
            ,upload = layui.upload
            ,layer = layui.layer
            ,content = '{$data["detail"]|default=""}';

        const E = window.wangEditor
        const editor = new E('#content')
        editor.create()
        editor.txt.html(content)
        editor.config.uploadImgServer = "/admin/upload/layuiUploads?dir=rich_text"

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('upload/ajaxUploads')}"
            ,accept: "images"
            ,field: "image"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else{
                    // console.log(res);
                    // $('input[name="image"]').val(res.data[0].path)
                    // console.log(res.data[0].path);
                    $('#image_src').val(res.data[0].path)
                }

                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#test-upload-demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        //普通图片上传
        var uploadInst2 = upload.render({
            elem: '#test2'
            ,url: "{:url('upload/ajaxUploads')}"
            ,accept: "images"
            ,field: "detail"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#test-upload-normal-img1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else{
                    // console.log(res);
                    // $('input[name="image"]').val(res.data[0].path)
                    // console.log(res.data[0].path);
                    $('#detail_src').val(res.data[0].path)
                }

                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#test-upload-demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst2.upload();
                });
            }
        });

        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            console.log(field);
            field.detail = editor.txt.html()

            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.post("{:url('product/save')}",field,function (ret) {
                if (ret.code == 0){
                    layer.msg(ret.msg,{icon:6,time:1000},function () {
                        parent.layer.close(index); //再执行关闭
                        parent.window.location.reload();
                    })
                }else{
                    layer.msg(ret.msg,{icon:5,time:1000})
                }
            });
        });
    })
</script>
